<template>
  <div id="gwc">
    <div id="gwc-header">
      <div id="gwc-header-l">
        <span>购物车</span>
      </div>
      <div id="gwc-header-r">
        <span>管理</span>
      </div>
    </div>
    <div id="gwc-1">
      <div id="gwc-1-1">
        <div id="gwc-1-1-l">
          <form>
            <input type="checkbox" />
          </form>
          <span>全选</span>
          <a href="">茶窝网</a>
        </div>
        <div id="gwc-1-1-r">
          <span>满99免运费</span>
        </div>
      </div>
      <div id="gwc-1-2">
        <div id="gwc-1-2-l">
          <span class="iconfont icon-youhuiquan_huaban"></span>
          <span>有代金券可领取</span>
        </div>
        <div id="gwc-1-2-r">&gt;</div>
      </div>
      <div id="gwc-1-3">
        <div id="gwc-1-3-l">
          <form>
            <input type="checkbox" />
          </form>
          <img
            src="https://www.chawo.com/data/upload/shop/store/goods/2/2017/12/2_05671890230647455_240.jpg"
          />
        </div>
        <div id="gwc-1-3-r">
          <p>2017年中茶7581单片装熟茶250克/砖(oCY)</p>
          <div id="box">
            <span>￥108.00</span>
            <div id="box1">
              <button>-</button>
              <span>1</span>
              <button>+</button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="gwc-footer">
      <div id="gwc-footer-l">
        <form>
          <input type="checkbox" />
        </form>
        <span>全选</span>
      </div>
      <div id="gwc-footer-r">
          <span>合计金额:</span>
          <span>￥108.00</span>
          <button>结算(1)</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style>
#gwc {
  width: 100%;
  height: 5rem;
  margin-bottom: 0.45rem;
  background-color: gainsboro;
  padding: 0 0.1rem;
}
#gwc-header {
  width: 100%;
  height: 0.44rem;
  line-height: 0.44rem;
  display: flex;
  justify-content: space-between;
  border-bottom: 0.01rem solid gray;
}
#gwc-1 {
  width: 100%;
  background-color: white;
  margin-top: 0.1rem;
  padding: 0.1rem;
  border-radius: .05rem;
}
#gwc-1-1 {
  display: flex;
  justify-content: space-between;
}
#gwc-1-1-l input {
  width: 0.15rem;
  height: 0.15rem;
}
#gwc-1-1-l form {
  width: 0.15rem;
  height: 0.15rem;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #000;
  display: inline-block;
}
#gwc-1-1-l span {
  font-size: 0.12rem;
  margin-left: 0.05rem;
}
#gwc-1-1-l a {
  margin-left: 0.15rem;
  font-weight: 700;
  color: #000;
}
#gwc-1-1-r span {
  color: red;
}
#gwc-1-2 {
  padding: 0.1rem;
  display: flex;
  justify-content: space-between;
}
#gwc-1-2 span:nth-of-type(1) {
  font-size: 0.17rem;
  color: red;
}
#gwc-1-2 span:nth-of-type(2) {
  font-size: 0.14rem;
  color: gray;
  margin-left: 0.05rem;
}
#gwc-1-3 {
  padding: 0.1rem 0.1rem 0 0;
  height: 1.09rem;
  display: flex;
  justify-content: space-between;
}
#gwc-1-3-l {
  height: 0.99rem;
  line-height: 0.99rem;
  display: flex;
  align-items: center;
}
#gwc-1-3 form {
  width: 0.15rem;
  height: 0.15rem;
  border-radius: 50%;
  border: 1px solid black;
  overflow: hidden;
}
#gwc-1-3 input {
  width: 0.15rem;
  height: 0.15rem;
  display: block;
}
#gwc-1-3-l img {
  width: 0.9rem;
  height: 0.9rem;
}
#gwc-1-3-r {
  margin-left: 0.1rem;
}
#gwc-1-3-r p {
  font-size: 0.14rem;
}
#gwc-1-3-r #box span {
  color: #c9141c;
  margin-right: 3px;
  font-weight: 700;
}
#gwc-1-3-r #box {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
}
#gwc-1-3-r #box1 button {
  width: 0.3rem;
  color: #c8c9cc;
  border-radius: 4px 0 0 4px;
  border: none;
}
#gwc-1-3-r #box1 span {
  display: inline-block;
  width: 0.4rem;
  background-color: gainsboro;
  color: black;
  font-weight: normal;
  text-align: center;
  margin: 0 0.03rem;
}
#gwc-footer {
  width: 100%;
  height: 0.4rem;
  position: fixed;
  bottom: 0.45rem;
  display: flex;
  justify-content: space-between;
  padding-right: .1rem;
}
#gwc-footer-l{
    height: .4rem;
    display: flex;
    align-items: center;
}
#gwc-footer-l form{
    width: 0.15rem;
    height: 0.15rem;
    border-radius: 50%;
    border: 1px solid black;
    overflow: hidden;
}
#gwc-footer-l input{
     width: 0.15rem;
    height: 0.15rem;
    display: block;
}
#gwc-footer-l span{
    font-size: 0.12rem;
    margin-left: 0.05rem;
}
#gwc-footer-r{
    height: .4rem;
    line-height: .4rem;
}
#gwc-footer-r span:nth-of-type(1){
    font-size: .14rem;
}
#gwc-footer-r span:nth-of-type(2){
    font-size: .18rem;
    font-weight: 700;
    color: red;
    margin-right: .15rem;
}
#gwc-footer-r button{
    border: none;
    border-radius: .18rem;
    padding: 0px 33px;
    background-color: #c9141c;
    color: white;
    line-height: .35rem;
    margin-right: .1rem;
}
</style>